<template>
	<view class="ui-fixed">
		<!-- 顶部导航可以加一个背景 -->
		<view
			class="ui-fixed-box"
			:id="`fixed-${uuid}`"
			:class="[{ fixed: state.fixed }]"
			:style="[
				{
					left: sticky ? 'auto' : '0px',
					top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
					bottom: insetHeight,
					zIndex: index + $zIndex.navbar,
				},
				!alway ? { opacity: state.opacityVal } : '',
			]"
		>
			<view
				class="ui-fixed-content"
				@tap="toTop"
				:style="[{ zIndex: index + $zIndex.navbar }]"
			>
				<slot></slot>
				<view
					v-if="safeAreaInsets.bottom && bottom && isInset"
					class="inset-bottom"
					:style="[{ height: safeAreaInsets.bottom + 'px' }]"
				></view>
			</view>
			<view class="ui-fixed-bottom" :class="[bg]" v-if="bottom"></view>

			<view
				class="ui-fixed-bg"
				:class="[ui, bg]"
				:style="[
					{ zIndex: index + $zIndex.navbar - 1 },
					bgStyles,
					opacity ? { opacity: state.opacityVal } : '',
				]"
			></view>
		</view>

		<!--  这里应该是一个永久站位，不能是normal才显示 ， 这种根据终端实际在计算高度, 根据实际需要是否站位
			根据条件显示站位问题
			v-if="sticky ? state.fixed : placeholder && state.fixed"
		-->
		<view
			class="skeleton"
			:style="[{ height: state.content.height + 'px', width: width + 'px' }]"
			v-if="sticky ? state.fixed : placeholder && state.fixed"
		></view>
	</view>
</template>

<script setup>
	import { onPageScroll } from '@dcloudio/uni-app';
	import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue';
	import $platform from '/shop/platform/index.js';
	import $helper from '/shop/helper/index.js';
	import $zIndex from '/shop/config/zIndex.js';

	const { safeAreaInsets } = $platform.device;

	const vm = getCurrentInstance();
	const uuid = $helper.guid();
	const sys_navBar = $platform.navbar;

	const state = reactive({
		content: {},
		fixed: true,
		scrollTop: 0,
		opacityVal: 0,
	});
	const insetHeight = computed(() => {
		if (state.fixed && props.bottom) {
			if (props.isInset) {
				return props.val + 'px';
			} else {
				return props.val + safeAreaInsets.bottom + 'px';
			}
		} else {
			return 'auto';
		}
	});
	const props = defineProps({
		noNav: {
			type: Boolean,
			default: false,
		},
		bottom: {
			type: Boolean,
			default: false,
		},
		bg: {
			type: String,
			default: '',
		},
		bgStyles: {
			type: Object,
			default() {},
		},
		val: {
			type: Number,
			default: 0,
		},
		width: {
			type: [String, Number],
			default: 0,
		},
		alway: {
			type: Boolean,
			default: true,
		},
		opacity: {
			type: Boolean,
			default: false,
		},
		index: {
			type: [Number, String],
			default: 0,
		},
		placeholder: {
			type: [Boolean],
			default: false,
		},
		sticky: {
			type: [Boolean],
			default: false,
		},
		noFixed: {
			type: Boolean,
			default: false,
		},
		ui: {
			type: String,
			default: '',
		},
		clickTo: {
			type: Boolean,
			default: false,
		},
		//是否需要安全区
		isInset: {
			type: Boolean,
			default: true,
		},
	});

	state.fixed = !unref(props.sticky);
	onPageScroll((e) => {
		let top = e.scrollTop;
		state.scrollTop = top;
		state.opacityVal = top > $platform.navbar ? 1 : top * 0.01;
	});

	onMounted(() => {
		console.log('alway: ', props.alway);
		nextTick(() => {
			computedQuery();
		});
	});

	const computedQuery = () => {
		uni.createSelectorQuery()
			.in(vm)
			.select(`#fixed-${uuid}`)
			.boundingClientRect((data) => {
				if (data != null) {
					state.content = data;
					if (unref(props.sticky)) {
						setFixed(state.scrollTop);
					}
				}
			})
			.exec();
	};

	const setFixed = (value) => {
		if (unref(props.bottom)) {
			state.fixed =
				value >=
				state.content.bottom -
					$platform.device.windowHeight +
					state.content.height +
					unref(props.val);
		} else {
			state.fixed =
				value >=
				state.content.top -
					(unref(props.noNav) ? unref(props.val) : unref(props.val) + $platform.navbar);
		}
	};

	const toTop = () => {
		if (props.hasToTop) {
			uni.pageScrollTo({
				scrollTop: state.content.top,
				duration: 100,
			});
		}
	};
</script>

<style lang="scss">
	.ui-fixed {
		.ui-fixed-box {
			position: relative;
			width: 100%;
			&.fixed {
				position: fixed;
			}
			.ui-fixed-content {
				position: relative;
			}
			.ui-fixed-bg {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				z-index: 1;
				pointer-events: none;
			}
		}
	}
	.inset-bottom {
		background: #fff;
	}
</style>
